<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>post传递JSON数据给后端</h2>
    <div class="wrap">
        <button class="get">获取图书</button>
        <button class="add">新增图书</button>
        <button class="edit">修改图书</button>
        <button class="delete">删除图书</button>
    </div>

    <script>
        /* 
            参数是一个对象config
            url
            method
            data:{} 通过请求体传递的数据写在data属性里面
        
        */

        function myAxios(config){
            return new Promise((resolve, reject) => {
                const {url, method = 'get', data} = config
                // 原生ajax 五步走
                // 1. 实例化xhr
                const xhr = new XMLHttpRequest()
                // 2. 设置方法和接口
                xhr.open(method, url)
                // 3. 请求头
                xhr.setRequestHeader('content-type', 'application/json')
                // 4. 注册回调函数
                xhr.addEventListener('load', () => {
                    if(xhr.status >= 200 && xhr.status < 300 || xhr.status === 304){
                        console.log(1111)
                        resolve(JSON.parse(xhr.response))
                    } else {
                        reject('请求失败')
                    }
                })
                // 5. 发送请求
                xhr.send(JSON.stringify(data))
            })
        }


        // apifox:
        // https://apifox.com/apidoc/shared-fa9274ac-362e-4905-806b-6135df6aa90e/api-25018003
        // GET 获取图书
        const api_get = 'http://ajax-api.itheima.net/api/books'
        // 新增图书
        // POST JSON格式 bookname/author/publisher
        const api_add = 'http://ajax-api.itheima.net/api/books' 
        // 修改图书  PUT  JSON格式 id
        const api_edit = 'http://ajax-api.itheima.net/api/books'
        // 删除图书  DELETE  id 
        const api_del = 'http://ajax-api.itheima.net/api/books'

        // const btn_get = document.querySelector('.get')
        // const btn_add = document.querySelector('.add')
        // const btn_edit = document.querySelector('.edit')
        // const btn_del = document.querySelector('.delete')

        // 事件委托绑定事件
        const box = document.querySelector('.wrap')
        box.addEventListener('click', (e) => {
            if(e.target.className === 'get'){
                // console.log(111)
                myAxios({
                    url:api_get,
                }).then(res => {
                    console.log(res)
                })
            }

            if(e.target.className === 'add'){
                myAxios({
                    url:api_add,
                    method:'post',
                    data:{
                        bookname:'新增的',
                        author:'xx',
                        publisher:'hh'
                    }
                }).then(res => {
                    console.log(res)
                })
            }

            if (e.target.className === 'edit'){
                myAxios({
                    url:`${api_edit}/325`,
                    method:'put',
                    data:{
                        bookname:'新增的修改',
                        author:'xx',
                        publisher:'hh'
                    }
                }).then(res => {
                    console.log(res)
                })
            }

            if (e.target.className === 'delete'){
                myAxios({
                    url:`${api_del}/318`,
                    method:'delete',
                }).then(res => {
                    console.log(res)
                    // alert('删除成功')
                }).catch(err => {
                    console.log(err)
                })
            }
        })

    </script>
</body>
</html>